<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件</title>
    <script src="../libs/vue.js"></script>
    <script src="../libs/vue-router.js"></script>

    <link rel="stylesheet" href="../libs/animate.css">
    <style>
        .box{
            width:400px;
            height: 400px;
            border:1px solid darkgoldenrod;
            border-radius: 10px;
        }
        table{
            border:1px solid #999;
            background: deeppink;
            color:#fff;
        }
        tr td{
            border:1px solid #999;
            padding:10px;
        }
        ul{
            background: darkgoldenrod;
            width:40%;
        }
        .zoom-enter-active{
            animation: zoomInDown 1s;
        }
        .zoom-leave-active{
            animation: zoomOutDown 1s;
        }
        .slot{
            width:50%;
            margin-top: 20px;
            border: 1px solid darkmagenta;
            border-radius: 10px;
            padding:30px;
        }
        .router-link-exact-active ,.router-link-active {
            padding:5px;
            border-radius: 5px;
            background: darkorange;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>  {{title }} </h2>
        <m-head></m-head>
        <hr>
        <h2>路由Demo</h2>
        <div class="box">
            <!-- 5. 路由出口  告诉vue 在哪里加载路由组件  -->
            <router-view></router-view>
        </div>

        <div>
            <!-- 6. 路由导航  路由跳转   -->
            <a href="#/home">首页0 </a>
            <router-link to="/home">首页</router-link>
            <router-link to="/find">发现</router-link>
            <router-link to="/mine">我的</router-link>
            <router-link to="/login">登录</router-link>
            <router-link to="/register">注册</router-link>

        </div>
    </div>


    <template id="home">
        <div>
            <h2>home - home - home </h2>
        </div>
    </template>

    <template id="find">
        <div>
            <h2>FInd - Find -  发现美丽 </h2>
        </div>
    </template>

    <template id="mine">
        <div>
            <h2>Mine - Mine -  个人中心 </h2>
        </div>
    </template>

    <template id="register">
        <div>
            <h2>register - register - 注册进行中 </h2>
        </div>
    </template>
    <template id="notfound">
        <div>
            <h2> notfound - notfound - 404 - 未找到 </h2>
        </div>
    </template>

    <script>
        // 全局注册
        const bus = new Vue()   // $emit $on $once 
        Vue.component("mHead",{
            template:"<header>Head - Head - wh2116daydayup </header>"
        })

        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

        // 1. 定义 (路由) 组件。
        const Home = {
            template:"#home"
        }
        const Find = {
            template:"#find"
        }
        const Mine = {
            template:"#mine"
        }
        const Login = {
            template:"<h2>Login = Login =  Login </h2>"
        }
        const Register = {
            template:"#register"
        }
        const NotFound = {
            template:"#notfound"
        }
        // 2. 定义路由
        // 每个路由应该映射一个组件。 其中"component" 可以是
        // 通过 Vue.extend() 创建的组件构造器，
        const routes = [
            {
                path:"/home",
                component:Home,
            },
            {
                path:"/find",
                component:Find 
            },
            {
                path:"/mine",
                component:Mine 
            },
            {
                path:"/login",
                component:Login 
            },
            {
                path:"/register",
                component:Register
            },
            {
                path:"/404",
                component:NotFound
            },
            {
                path:"*",
                redirect:"/404" // redirect 重定向 
            }
        ]

        // 3. 创建路由对象 然后传 `routes` 配置
        const router = new VueRouter({
            routes:routes,
            base:"",  //  路由的基路径  上线的时候需要处理 
            mode:"history"   // hash  还有 history 
        })
        // mode 路由模式  
        // hash 带 # 路由  根据地址url 的hash 切换来匹配路由  不 简洁和美观优雅 
        // history 不带 #  根据 浏览器history h5 api 实现页面切换  简单优雅 不能刷新 
        console.log(router) 

        // 4. 挂载全局的根实例对象 
        const vm = new Vue({
            router:router,         // this.$router 
            data:{
                title:"Vue  路由的初步学习使用  ",
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title 
                console.log(this.$router)  // 全局的路由对象 负责路由跳转 路由显示 
                console.log(this.$route)   // 当前激活的路由信息  可以获取相关的路由参数的  
            }
        }).$mount("#app")
    </script>
    
     <!-- 
        node 路由 根据不同的url接口 返回对应的不同的数据或者页面  (Later)
        Vue 路由 router 根据不同的url路径 pathname  匹配路由里面的 path 匹配成功就加载对应的组件(component)
        
        Vue-Router 是 Vue.js 官方的路由管理器。
        它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌
        
        路由作用 实现构建单页面应用  index.html 其他页面 组件形式加载
        single-page-application     (SPA)-

        将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们

        a. 掌握 配置最基本的路由 流程
        b. 路由传递参数  动态路由
        c. 嵌套路由
     -->
</body>
</html>


